<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>管理系统</title>
	<link rel="stylesheet" type="text/css" href="lib/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="lib/themes/icon.css">
	<script type="text/javascript" src="lib/jquery.min.js"></script>
	<script type="text/javascript" src="lib/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="lib/jiekou.js"></script>
    <script type="text/javascript" src="lib/tools.js"></script>
    <style>
        .ceshi{
            display: flex;
            float: right;
        }
    </style>
</head>
<body class="easyui-layout">
    <!-- 顶部 -->
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">
             <div class="ceshi" style="width: 600px;height: 40px;">
                       <span style="line-height: 40px;"   id="user">当前用户: admin</span> <span style="line-height: 40px;margin-left: 13px;" id="lastlogin">上次登陆时间:2021-07-27 12:12:12</span>
                       <a href="javascript:void(0)" id="logout"
					class="easyui-linkbutton" style="width: 80px;margin-left: 25px;">退出</a>     
             </div>
    </div>

    <!-- 左边 -->
	<div data-options="region:'west',split:true,title:'菜单'" 
    style="width:200px;padding:10px;">

        <div  style="padding:5px">
            <ul class="easyui-tree" id="tree_menu"></ul>
        </div>

    </div>
   <!-- 底部 -->
    <div data-options="region:'south',border:false" style="height:30px;background:#A9FACD;
    padding:5px;">
       <p style="margin-left: 10px; font-size: 5px; line-height: 10px;color:rgb(255,0,0);">@凯</p>
    </div>
     <!-- 中间 -->
	<div data-options="region:'center',title:'内容'" >

        <div id="contentTabs" class="easyui-tabs" style="width:100%;height:100%;">
            <div id="welcome" title="欢迎" data-options="closable:true" style="overflow:auto;padding:30px;display:block;">

                <h1 id="welcomedesc" style="color: red; display: block;">welcome!!! 数据加载中...</h1>

                <div id="welcomdata" style="display: none;">
                    <h2>访问者数据</h2>
                    <table>
                        <tr>
                            <td>您的位置:</td>
                            <td> <text id="clientaddress" style="color:red"></text></td>
                        </tr>
                        <tr>
                            <td>您的经纬度位置:</td>
                            <td ><text id="locationaddress" style="color: red;"></text></td>
                        </tr>
                        <tr>
                            <td>您的ip地址:</td>
                            <td><text id="ipaddress" style="color: red;"></text></td>
                        </tr>
                    </table>
                     <br>
                     <hr>
                    <h2>服务端的数据</h2>
                    <table>
                    <tr>
                        <td><text>服务器主机名:<text></text></td>
                        <td><text id="hostname" style="color:red"></text></td>
                        <td><text style="margin-left: 35px;">服务器平台:</text></td>
                        <td><text id="platform" style="color: red;"></text></td>
                    </tr>

                    <tr>
                        <td><text>内存大小:<text></text></td>
                        <td><text id="metotal" style="color:red"></text></td>
                        <td><text style="margin-left: 35px;">内存使用率:</text></td>
                        <td><text id="meuse" style="color: red;"></text></td>
                    </tr>
                    <tr>
                        <td><text>系统C盘使用率:<text></text></td>
                        <td><text id="cdisk" style="color:red"></text></td>
                        <td><text style="margin-left: 35px;">CPU使用率:</text></td>
                        <td><text id="cpuuse" style="color: red;"></text></td>
                    </tr>
                </table>
                </div>

            </div>
            
		</div> 

    </div>

  

    <script>
$(function(){

    var mytoken=Tools.getCookie("mytoken");
    if (!mytoken){
        window.location.href="index.html";
        return
    }
     
    function infoSuccess(res){
         if(res.code==200){
            console.log("===>",res.data.location,res.data.lat,res.data.clientip);
            $("#welcomedesc").css({"display":"none"});
            $("#welcomdata").css({"display":"block"});
            $("#clientaddress").text(res.data.location);
            $("#locationaddress").text(res.data.lat);
            $("#ipaddress").text(res.data.clientip+"");
            $("#hostname").text(res.data.hostname);
            $("#platform").text(res.data.platform+"");
            $("#metotal").text(res.data.memTotal);
            $("#meuse").text(res.data.memUsed);
            $("#cpuuse").text(res.data.cpuuse);
            $("#cdisk").text(res.data.disk[0].usedper);
                
        } else{
            $("#welcomedesc").text("数据加载异常,请重新刷新");
            $.messager.alert('提示','shibai!'+res.msg);
        }
    }
    function infoError(err){
        $("#welcomedesc").text("网络故障,请重新刷新再试！");
		Network.alert('服务端硬件信息请求失败!');
    }
    Network.get(jiekou.getInfo,{},infoSuccess,infoError);

    var timestamp = localStorage.getItem("lastlogin");
    var token = localStorage.getItem("token");
    var d = new Date(timestamp * 1000);    //根据时间戳生成的时间对象
    var date = (d.getFullYear()) + "-" + 
            (d.getMonth() + 1) + "-" +
            (d.getDate()) + " " + 
            (d.getHours()) + ":" + 
            (d.getMinutes()) + ":" + 
            (d.getSeconds());
    $("#user").text("当前用户:"+localStorage.getItem("loginname"));
    $("#lastlogin").text("上次登陆时间:"+date);

    $("#logout").click(function(){
        localStorage.clear();
        window.location.href="index.html";
        Tools.delCookie("mytoken");
    });
	function addTab(title, url){
    if ($('#contentTabs').tabs('exists', title)){
        $('#contentTabs').tabs('select', title);
    } else {
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
        $('#contentTabs').tabs('add',{
            title:title,
            content:content,
            closable:true
        });
    }
}
		//加载全部节点
	$("#tree_menu").tree({
			 url: Network.geturl("/v1/c?token=")+token,
			 animate:true,
			 lines:true,
	         onClick: function (node) {
	        	 //右侧跳转到指定页面
				 //console.log(node.text,node.path)
                 if(node.path){
                    addTab(node.text,node.path); 
                 }  
	         },
             onLoadError:function(err){
                 Network.alert('菜单树网络故障请重新登录',function(){
                    window.location.href='index.html';
                });
             }
		});


	});


    // websocket中的代码


    </script>


<script type="text/javascript">
    var token = localStorage.getItem("token");
    var wsUri ="ws://"+Network.IP+"/v1/conn?userid="+localStorage.getItem("loginname");

        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) { 
           
            console.log("---open--",evt);
        }; 
        websocket.onclose = function(evt) { 
           
            console.log("---close--");
        }; 
        websocket.onmessage = function(evt) { 
           var result=evt.data;
           if (result){
            var yy=JSON.parse(result);
            console.log(yy);
            console.log(yy.content,yy.type);
            if(yy.type == 1){

                $.messager.confirm('确认', "该账号已经在其他地方登录,请重新登录!!!", function(r){
                    localStorage.clear();
                    window.location.href="index.html";
                });
            }

           }
            
           
        }; 
        websocket.onerror = function(evt) { 
            console.log("---error--");
        }; 
   
</script>

    
</body>
</html>